<script setup>
import { ref } from "vue";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import { RouterLink, RouterView } from "vue-router";
const activeName = ref("摘要信息");
import { Star } from "@element-plus/icons-vue";

const handleClick = (tab, event) => {
  console.log(tab, event);
};
const search=ref("")
const height = ref(100);

const activeIndex = ref(1);
const tabs = (i) => {
  activeIndex.value = i;
};

// 下面是分页
const currentPage4 = ref(1)
const pageSize4 = ref(100)
const disabled = ref(false)
const total = ref(400)
const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
}

// 下拉
const value = ref('')

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

// 开始和结束时间
const value1 = ref('')


// 下面是表格的样式
const multipleTableRef = ref()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}
const tableData = ref([
    {
        id: 1,
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        start: 0
    },
    {
        id: 2,
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        start: 1
    },
    {
        id: 3,
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        start: 1
    }

])
//单机行
const rowClick = (row) => {
    console.log(row.id);//跳转页面
    router.push("/zbdesc")

}

</script>

<template>
    <Header></Header>
    <div class="bigmiddiv navrumb">
        <el-breadcrumb>
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/cgdwjs' }">采购单位检索</el-breadcrumb-item>
            <el-breadcrumb-item class="blue">
                <span class="blue">采购单位检索详情</span>
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <!-- <div class="bigmiddiv bgwhite">
    <RouterLink class="alink" :to="{path:'/zbjs'}">招标检索</RouterLink>
    <RouterLink class="alink" :to="{path:'/qyjs'}">企业检索</RouterLink>
    <RouterLink class="alink" :to="{path:'/cgdwjs'}">采购单位检索</RouterLink>
  </div> -->
    <main class="mincon">


        <div class="bigmiddiv bgwhite">
            <div class="titcon">

                <div class="graybgcon  flexbewteen">
                    <section class="flex">
                        <div class="leftName">华为</div>
                        <div>
                            <p>
                                
                                江苏金财投资有限公司
                                <el-tag class="tagspan tagtop" type="danger">注销</el-tag></p>
                            <p>
                                <el-tag class="tagspan tagbottoom" type="danger">2个联系方式</el-tag>
                                <el-tag class="tagspan tagbottoom" type="info">民营企业</el-tag>
                            </p>
                        </div>
                    </section>

                    
                </div>
                
            </div>
            
        </div>
        <div class="bigmiddiv bgwhite  descmid ">
            <div class="leftwhite">
                <a @click="tabs(3)" class="defaulta" :class="[activeIndex == 1 ? 'active' : '']" href="#qytxl">企业通讯录</a>
                <a @click="tabs(4)" class="defaulta" :class="[activeIndex == 2 ? 'active' : '']" href="#zbdt">中标动态</a>
               
                <section id="qytxl">
                     <div class="commontitle" id="gonggao">
                        企业通讯录
                    </div>
                    <table  class="customtable">
                    <thead class="colortd">
                        <th>
                            序号
                        </th>
                        <th>
                            联系人
                        </th>
                        <th>
                            联系方式
                        </th>
                        <th>
                            来源
                        </th>
                        <th>
                            发布时间
                        </th>
                    </thead>
                    <tbody>

                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                    </tbody>
                </table>

                <el-pagination class="pagination" v-model:current-page="currentPage4" v-model:page-size="pageSize4"
            :page-sizes="[100, 200, 300, 400]" :background="true" size="small" :disabled="disabled"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
                </section>
                
                
            </div>

        </div>
        <div  class="bigmiddiv bgwhite">
            <section id="zbdt">
                <div class="commontitle" >
                    中标动态
                 </div>
                 <div class="bigmiddiv">
                    <!-- <el-input v-model="search" style="width: 240px" placeholder="" />
                <el-button type="primary">搜索</el-button> -->
                    <el-input v-model="search" class="searchinput" style="width: 1100px;" placeholder="请输入标项名称等关键词，例如：理疗设备">
                        <template #append>
                            <el-button type="primary" class="searchprimary">搜索</el-button>
                        </template>
                    </el-input>
                </div>
                <el-row class="selectrow"  :gutter="10">
                  <el-col :span="4">
                    <el-select v-model="value" class="m-2" placeholder="Select">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
                  </el-col>
                  <el-col :span="4">
                        <el-select v-model="value" class="m-2" placeholder="Select">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
                  </el-col>
                  <el-col :span="4">
                        <el-select v-model="value" class="m-2" placeholder="Select">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
                  </el-col>
                  <el-col :span="4">
                        <el-select v-model="value" class="m-2" placeholder="Select">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
                  </el-col>
                 
                </el-row>
                <div>
                    发布时间 <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="To"
        start-placeholder="Start date"
        end-placeholder="End date"
        
      />
                </div>
                
            </section>
            <div class="tablecon">
        <!-- {{ multipleSelection }} -->
        <div class="tabletitle flexbewteen">
            <section class="lefttitle">
                搜索到 <span>520500信息</span> 
            </section>
            <section class="flex">
                <span @click="manyExport" class="manyExport">
                    <el-icon>
                        <Promotion />
                    </el-icon>
                    批量导出</span>
              

            </section>
        </div>
        <el-table @row-click="rowClick" ref="multipleTableRef" border :data="tableData" row-key="id" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column label="项目名称" width="120">
                <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column property="name" label="公司类型" width="120" />
            <el-table-column property="address" label="预算/万元" />
            <el-table-column property="address" label="招标单位" />
            <el-table-column property="address" label="招标金额/万元" />
            <el-table-column property="address" label="发布日期" />
               
        </el-table>
        <el-pagination class="pagination" v-model:current-page="currentPage4" v-model:page-size="pageSize4"
            :page-sizes="[100, 200, 300, 400]" :background="true" size="small" :disabled="disabled"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
        </div>
    </main>
    <Footer></Footer>
</template>
<style scoped lang="scss">
.tagspan {
  padding: 0 3px;
  margin-right: 10px;
  font-size: 12px;
}
.tagbottoom {
  margin-top: 10px;
}
.tagtop {
  margin-left: 10px;
  font-size: 12px;
}
.selectrow{
    margin-top: 16px;
    margin-bottom: 20px;
}

.graybg {
  border-radius: 2px;
  border: 0.5px solid #f3f3f3;
  background: #f5f6fa;
  color: #040919;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  /* 128.571% */
  padding: 3px 8px;
  margin: 14px 0;
  margin-right: 10px;
}

.graybgcon {
  margin: 14px 0;
}

.defaulta {
  color: #040919;
  font-family: "Microsoft YaHei";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-right: 20px;
  padding-bottom: 5px;

  border-bottom: 2px solid transparent;
}

.active {
  color: #3873ff !important;
  border-bottom: 2px solid #3873ff;
}

.commontitle {
  color: #040919;
  font-family: "Microsoft YaHei";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding-left: 5px;
  border-left: 3px solid #3873ff;
  margin: 16px 0;
}

.titcon {
  .boldtext {
    color: #252627;

    font-family: "Microsoft YaHei";
    font-size: 23.063px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px;
    /* 156.098% */
  }

  .bottomp {
    color: #888b98;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
    /* 175% */
  }
}

.alink {
  border-bottom: 2px solid transparent;
  margin-right: 30px;
  padding-bottom: 10px;
  font-size: 18px;
  font-weight: 400;
  color: #040919;
}

.bgwhite {
  margin-bottom: 16px;
}

.more {
  margin-top: 16px;
  color: #3873ff;
}

.router-link-active {
  border-bottom: 2px solid #3873ff;
  font-weight: 700;
  color: #3873ff;
}

.customtable {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-collapse: collapse;

  .colortd {
    background: #f2f9fc;
    min-width: 150px;
  }

  td,
  th {
    border: 1px solid rgba(0, 0, 0, 0.04);
    height: 46px;
    line-height: 46px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

.descmid {
  align-items: flex-start;

  .leftwhite {
    background: white;
  }
}
.tablecon {
    background: white;

    .tabletitle {
        font-size: 14px;
        margin-bottom: 16px;

        b {
            font-weight: bold;

        }

        .lefttitle {
            span {
                color: #3873FF;
                font-weight: bold;
            }
        }

        .manyExport {
            margin-right: 20px;

        }

    }
}


.leftName {
  padding: 10px;
  font-size: 20px;
  background: hsl(197, 91%, 70%);
  margin-right: 16px;
  border-radius: 10px;
  font-weight: bold;
  color: black;
}
</style>